<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
	<meta name="author" content="art" />
	<title>H5Editor 富文本网页编辑器</title>
	<meta name="keywords" content="ArtEditor,H5Editor,html5,富文本,在线网页编辑器,剪贴板上传,取色器,emoji,地图定位，类知乎编辑器" />
	<meta name="description" content="H5Editor是一款所见即所得的JavaScript富文本编辑器；全面支持html5语义规范，自动适配PC、手机等移动设备的响应式网页布局；具备开源、好用、界面美观等极致化设计特点。" />
    <link rel="stylesheet" href="/s/style.css"/>
    <script src="/s/jquery.js"></script>
    <script src="/s/dialog-plus.js"></script>
    <script src="/s/paste.js"></script>
    <script src="/s/config.js"></script>
    <script src="/s/script.js"></script>
</head>
<body>
<div id="AE_editor">
    <svg fill="#8590a6" _action="b"><use href="icon.svg#b"></use><title>粗体</title></svg>
    <svg fill="#8590a6" _action="i"><use href="icon.svg#i"></use><title>斜体</title></svg>
    <svg fill="#8590a6" _action="color"><use href="icon.svg#color"></use></svg>
    <span>|</span>
    <svg fill="#8590a6" _action="header"><use href="icon.svg#header"></use></svg>
    <svg fill="#8590a6" _action="ol"><use href="icon.svg#ol"></use><title>无序列表</title></svg>
    <svg fill="#8590a6" _action="ul"><use href="icon.svg#ul"></use><title>有序列表</title></svg>
    <svg fill="#8590a6" _action="table"><use href="icon.svg#table"></use><title>插入表格</title></svg>
    <span>|</span>
    <svg fill="#8590a6" _action="a"><use href="icon.svg#a"></use><title>插入超链接</title></svg>
    <svg fill="#8590a6" _action="emoji"><use href="icon.svg#emoji"></use></svg>
    <svg fill="#8590a6" _action="hr"><use href="icon.svg#hr"></use><title>插入分隔线</title></svg>
    <span>|</span>
    <svg fill="#8590a6" _action="photo"><use href="icon.svg#img"></use><title>上传图片</title></svg>
    <svg fill="#8590a6" _action="video"><use href="icon.svg#video"></use><title>上传音视频</title></svg>
    <svg fill="#8590a6" _action="archive"><use href="icon.svg#archive"></use><title>上传附件</title></svg>
    <span>|</span>
    <svg fill="#8590a6" _action="blockquote"><use href="icon.svg#blockquote"></use><title>引用块</title></svg>
    <svg fill="#8590a6" _action="pre"><use href="icon.svg#pre"></use><title>插入代码</title></svg>
    <svg fill="#8590a6" _action="map"><use href="icon.svg#map"></use><title>插入地图</title></svg>
    <svg fill="#8590a6" _action="html" class="fr"><use href="icon.svg#html"></use><title>可视-源码切换</title></svg>
</div>
<div contenteditable="true" class="AE_article">
    <h3 class="fc1 center">欢迎使用H5Editor富文本编辑器</h3>
    <hr>
    <p>　　H5Editor是一款<b>所见即所得的</b>JavaScript富文本编辑器；全面支持<b class="fc21">html5语义规范</b>，自动适配PC、手机等移动设备的<i class="fc1">响应式网页布局</i>；具备开源、好用、界面美观等极致化设计特点。</p><br>

    <h4>这些功能正是你在寻找的吗？</h4>
    <ol>
        <li>仅允许 img、video、audio、a、b、i、em、span、cite、strong、p、pre、br、hr、blockquote、ul、ol、li、h1、h2、h3、h4、h5、h6、table、tbody、tr、th、td Html5常用标签和 class、src标签属性，有效杜绝XSS攻击；</li>
        <li>支持 emoji互动、图片上传、音视频播放、文件下载、地图位置等媒体资源，使用表格、列表、标题正文、引用、代码、分割线等分层次表现结构，使得网页内容丰富多彩，简洁明朗；</li>
        <li>支持从剪贴板粘贴图片，自动过滤从word、pdf、网页等复制内容所带样式，重新使用编辑器规范生成样式；</li>
        <li>支持PC、手机等响应式设计，自动适配各厂家设备屏幕尺寸，合理组局，界面美观，内容层次分明雅致；</li>
        <li>可视化编辑，所见即所得，配合源码编辑模式，可供高级开发人员快速调优；</li>
        <li>可自定义数据模型组件，支持特殊业务需求；</li>
        <li>兼容几乎市面上所有浏览器，随意选择，无后顾之忧。</li>
    </ol>

    <h4>项目中接入方法</h4>
    <p>STEP 1、从码云（或github）上下载H5Editor安装包，复制到到项目静态目录，并配置config.js文件中上传地址，媒体资源存放路径。</p>
<pre>const AE_path = {
    upload: '/qa/upload',
    emoji: '/emoji/',
    photo: '/file/static/picture/',
    video: '/file/static/video/',
    archive: '/file/static/archive/',
};</pre>
    <p>STEP 2、在需要使用编辑器的页面脚本末尾引入类库脚本。</p>
<pre>
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="dialog-plus.js"&gt;&lt;/script&gt;
&lt;script src="paste.js"&gt;&lt;/script&gt;
&lt;script src="config.js"&gt;&lt;/script&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;
</pre>
    <p>STEP 3、在内容编辑位置复制粘贴编辑器操作按钮、输入框。</p>
<pre>
&lt;div id="AE_editor"&gt;... &lt;/div&gt;
&lt;div contenteditable="true" class="AE_article"&gt;
&lt;textarea id="AE_article" class="hide"&gt;&lt;/textarea&gt;
</pre>
    <p>STEP 4、提交表单时接收编辑器编辑内容。</p>
<pre>
let content=$('.AE_article').html().replace(/\sid="_[_.]?\d{13}"/g,'');
</pre>
    <p>STEP 5、在内容显示页面头部引入富文本样式表（也可以使用自己定义的）style.css。</p>
<pre>
&lt;link rel="stylesheet" href="style.css"/&gt;
</pre><br>

    <h4>快速编辑视频教程</h4>
    <video src="/s/image/help_video.mp4" controls="controls" playsinline muted></video><br><br>

    <blockquote>依赖第三方类库：</blockquote>
    <ul>
        <li>1.7版本以上Jquery：<a href="#">https://jquery.com/download/</a></li>
        <li>ArtDialog-plus：<a href="#">http://aui.github.io/artDialog/</a></li>
        <li>剪贴板文本、图片粘贴paste：<a href="#">https://github.com/layerssss/paste.js/</a></li>
    </ul><br>

    <h4>H5Editor更新订阅号：<b class="fc1">h5editor</b></h4>
    <img src="/s/image/subscribe.png" alt="H5Editor订阅号"><br><br>

    <h3 class="fc0">支持开源，赞助我们</h3>
    <p class="fc16">我们郑重承诺：所有赞助均用于H5Editor开发升级以及软硬件消耗，赞助企业或个人根据赞助力度、金额大小依次排列，若有不妥请务必QQ：<b class="fc21">2581221391</b>（或邮件：<b class="fc21">eqphp_framework@126.com</b>）联系。</p>

</div>
<textarea id="AE_article" class="hide"></textarea>

<div class="hide">
<div id="color">
    <div class="color_board"></div>
</div>
<div id="header">
    <div class="header_list">
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h6>六级标题</h6>
    </div>
</div>
<div id="emoji">
    <div class="emoji_list">
        <h3><span>QQ</span><span>QQ新版</span><span>QQ老版</span><span class="select">美人鱼</span></h3>
        <p class="emoji_0 hide"></p>
        <p class="emoji_1 hide"></p>
        <p class="emoji_2 hide"></p>
        <p class="emoji_3">
            <img src="emoji/fish/popup.gif" alt="冒泡">
            <img src="emoji/fish/blink.gif" alt="眨眼">
            <img src="emoji/fish/cry.gif" alt="哭">
            <img src="emoji/fish/3ks.gif" alt="谢谢">
            <img src="emoji/fish/ha.gif" alt="困">
            <img src="emoji/fish/kiss.gif" alt="飞吻">
            <img src="emoji/fish/no.gif" alt="不行">
            <img src="emoji/fish/show.gif" alt="闪耀登场">
        </p>
    </div>
</div>
<div id="table">
    <ul class="duf">
        <li><input name="table" type="text" placeholder="输入行数（1~99）" maxlength="2"></li>
        <li><input name="column" type="text" placeholder="输入列数（1~20）" maxlength="2"></li>
        <li><select name="head">
            <option value="none">表头位置：无</option>
            <option value="top">顶部</option>
            <option value="left">左边</option>
            <option value="both">顶部和左边</option>
        </select></li>
    </ul>
</div>
<div id="a">
    <ul class="duf">
        <li><input name="a" type="text" placeholder="输入链接文本"></li>
        <li><input name="url" type="text" placeholder="输入链接地址（url）"></li>
    </ul>
</div>
<div id="map">
    <ul class="duf">
        <li><input name="map" type="text" placeholder="地址或单位名称"></li>
        <li><input name="position" type="text" placeholder="经纬度（如：116.301902,40.054627）"></li>
    </ul>
</div>
<input name="archive" type="file">
<input name="photo" type="file" accept="image/*">
<input name="video" type="file" accept="video/*">
</div>
</body>
</html>